<template>
	<view class="main">
		<view class="head">
			<view _class="headWard">
				<u-icon name="arrow-leftward" color="#fff" size="40" @tap="back()"></u-icon>
			</view>
			<view class="headInput">
				<view class="headInput-box">
					<view class="headInput-boxIcon">
						<u-icon name="search" size="30" color="#A7A7A7"></u-icon>
					</view>
					<view class="headInput-boxInput">
						<input type="text" placeholder-style="font-size:28rpx" placeholder="搜索商品" />
					</view>
					<view class="headInput-boxText">
						搜索
					</view>
				</view>
			</view>
		</view>
		<view class="merchant">
			<view class="merchant-l">
				<image :src="shop.avatar" mode=""></image>
			</view>
			<view class="merchant-c">
				<view class="merchant-cTitle">
					{{shop.shopname}}
				</view>
				<view class="merchant-cDate">
					{{shop.address}},营业时间:{{shop.open_time}}
				</view>
			</view>
			<view class="merchant-r" @tap="pay()">
				买单
			</view>
		</view>
		<view class="list">
			<view class="listTab">
				<view :class="tab==0?'listTab-item active':'listTab-item'" @click="tab=0">
					商品服务
				</view>
				<view :class="tab==1?'listTab-item active':'listTab-item'" @click="tab=1">
					商家信息
				</view>
			</view>
			<view class="listMerchant" v-if="tab==0">
				<text v-if="!shop.goods">暂无商家服务</text>
				
				<view class="goodslist">
					<view class="listItem" v-for="(item,i) in shop.goods" v-if="shop.goods">
						<view class="listItem-imgs" @tap="togoods(item.id)">
							
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="listItem-title">
							{{item.title}}
						</view>
						<view class="listItem-money">
							{{item.price}}
						</view>
						<view class="listItem-sales">
							销量:{{item.views}}
						</view>
						<view class="listItem-text">
							享乐汇
						</view>
					</view>
				</view>
			</view>
			<view class="listMerchant" v-if="tab==1">
				<view class="listMerchant-item">
					<view class="listMerchant-itemTitle">
						{{shop.shopname}}
					</view>
					<view class="listMerchant-itemDate">
						营业时间：{{shop.open_time}}
					</view>
					<view class="listMerchant-itemAddress">
						<view class="listMerchant-itemAddress-l">
							{{shop.address}}
						</view>
						<view class="listMerchant-itemAddress-r">
							<a href="tel:1234567890" style="text-decoration: none;">
								<view class="listMerchant-itemAddress-rIcon" style="margin-right: 20rpx;">
									<u-icon name="phone-fill" size="24" color="#1B77FB"></u-icon>
								</view>
							</a>
							<view class="listMerchant-itemAddress-rIcon">
								<u-icon name="map-fill" size="26" color="#1B77FB"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="listMerchant-item">
					<view class="listMerchant-itemTitle">
						商家照片
					</view>
					<view class="listMerchant-itemDate">
						<text v-if="!shop.pictures">暂无商家照片</text>
						<text v-if="shop.pictures">{{shop.pictures}}</text>
					</view>
				</view>
				<view class="listMerchant-item">
					<view class="listMerchant-itemTitle">
						商家描述
					</view>
					<view class="listMerchant-itemDate">
						<text v-if="!shop.description">暂无商家描述</text>
						<text v-if="shop.description">{{shop.description}}</text>
						
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" >
			<view class="bottomL">
				<image src="/static/ShoppingCart.png" mode=""></image>
				<view class="bottomL-text">
					共选购<span class="bottomL-texctNum">{{goodsCount}}</span>件商品
				</view>
			</view>
			<view class="bottomR">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import jvue from '@/libs/jdk/jvue';
	
	export default {
		data() {
			return {
				tab: 0,
				query:{},
				shop:{},
				id:0,
				goodsList:{},
				goodsCount:0,
			}
		},
		onLoad(e){
			this.query = e;
			this.id= e.id;
			this.load_entity(this.id);
		},
		onShow(){
			
		},
		methods: {
			load_entity(id){
				var that = this;
				uni.showLoading({	title: '加载中...',	mask: false		});				
				var api_url = "/xiangapi/loadshop?id=" + id;
				var url =  api_url ;			
				console.log("商家",url);
				uni.request({
					url: url,
					method: 'GET',
					data: {
						
					},
					success: res => {						
						console.log("load_entity",res);						
						that.shop = res.data;
						uni.hideLoading();
					},
					fail: () => {},
					complete: () => {}
				});
			},
			togoods(id){
				let url ="/pages/product/goods?id=" + id;
				jvue.toUrl(url);
			},
			back(){
				jvue.back();
			},
			pay(){
				var that = this;
				var url = "/city/new_pages/receive?id="+this.id;
				jvue.toUrl(url);
			}
		}
		//new_pages/receive
	}
</script>

<style>
	.main {
		background: #F7F8FA;
	}

	.head {
		background: linear-gradient(#1676FD, #030810);
		display: flex;
		padding: 30rpx;
		height: 500rpx;
		padding-top: 60rpx;
	}

	.headWard {
		border: 2rpx solid #fff;
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.headInput {
		padding-left: 30rpx;
		flex: 1;
	}

	.headInput-box {
		background: #fff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		padding: 16rpx 30rpx;
	}

	.headInput-boxInput {
		margin: 0 10rpx;
		flex: 1;
		font-size: 28rpx;
		position: relative;
		top: 2rpx;
	}

	.headInput-boxText {
		font-size: 30rpx;
	}

	.merchant {
		margin: 0 30rpx;
		display: flex;
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		top: -80rpx;
		padding: 30rpx;
	}

	.merchant-l {
		padding-right: 20rpx;
	}

	.merchant-l image {
		width: 140rpx;
		height: 140rpx;
	}

	/* 
	.merchant-c {
		margin-right: 30rpx;
	} */

	.merchant-cTitle {
		width: calc(100% - 20rpx);
		font-size: 34rpx;
		white-space: nowrap;
		/* 禁止文本换行 */
		overflow: hidden;
		/* 超出容器部分隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
	}

	.merchant-cDate {
		font-size: 24rpx;
		color: #86909C;
		margin-top: 60rpx;
	}

	.merchant-r {
		background: #FF5F3B;
		color: #fff;
		position: absolute;
		bottom: 30rpx;
		width: 90rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		border-radius: 10rpx;
		right: 30rpx;
	}

	.list {
		padding-bottom: 140rpx;
		position: relative;
		top: -40rpx;
	}

	.listTab {
		background: #fff;
		display: flex;
		font-size: 32rpx;
		padding: 30rpx;
		color: #86909C;
		border-radius: 30rpx 30rpx 0 0;
		border-bottom: 2rpx solid #ededed;
	}

	.listTab-item {
		margin-right: 30rpx;
	}

	.active {
		color: #1676FD;
		border-bottom: 4rpx solid #1676FD;
		padding-bottom: 4rpx;
	}

	.listMerchant {
		padding: 0px 10px;
	}

	.listMerchant-item {
		background: #fff;
		padding: 14rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		min-height: 200rpx;
	}

	.listMerchant-itemDate {
		color: #86909C;
		font-size: 24rpx;
		margin: 20rpx 0;
	}

	.listMerchant-itemAddress {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.listMerchant-itemAddress-r {
		display: flex;
	}

	.listMerchant-itemAddress-rIcon {
		background: #E9F2FF;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.listMerchant-itemAddress-l {
		flex: 1;
		margin-right: 30rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		background: #fff;
		box-shadow: 0 0 30rpx #ededed;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottomL {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}

	.bottomL image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 30rpx;
	}

	.bottomR {
		background: #94BFFF;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		color: #fff;
	}

	.bottomL-texctNum {
		color: #FF5F3B;
		font-size: 42rpx;
		margin: 0 6rpx;
	}
	
	
	.goodslist {
		margin: 0 10rpx;
		padding-bottom: 30rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.goodslist .listItem {
		
		background: #fff;
		box-shadow: -6rpx 6rpx 10rpx #ededed;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
	}
	
	.goodslist .listItem-imgs {
		
	}
	
	.goodslist .listItem-imgs image {
		width: 100%;
		height: 360rpx;
	}
	
	.goodslist .listItem-title {
		font-size: 34rpx;
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 使用省略号 */
		margin: 0 20rpx;
	}
	.goodslist .listItem-money{
		color: red;
		margin:20rpx;
		margin-bottom: 10rpx;
	}
	.goodslist .listItem-sales{
		font-size: 29rpx;
		color: #A7A7A7;
		margin:0 20rpx;
	}
	.goodslist .listItem-text{
		margin-top: 10rpx;
		margin-left: 30rpx;
	}
	
	
</style>

